<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvasa" style="border: 1px solid gray;"></canvas>
<canvas id="canvasb" style="border: 1px solid gray;"></canvas>
<div  style="text-align: center;">
    <a href="javascript:revers()">revers</a>
    <a href="javascript:gray()">gray</a>
    <a href="javascript:black()">black</a>
</div>
</body>
<script>
    var canvasa = document.getElementById("canvasa");
    var cxta = canvasa.getContext("2d");
    var canvasb = document.getElementById("canvasb");
    var cxtb = canvasb.getContext("2d");
    var img = new Image();
    window.onload = function () {
        canvasa.width = 500;
        canvasa.height = 500;
        canvasb.width = 500;
        canvasb.height = 500;
        img.onload = function () {
            img.width = canvasa.width;
            img.height = canvasa.height;
            cxta.drawImage(img,0,0,canvasa.width,canvasa.height);
        };
        img.src = "autumn.jpg";

    };

    function revers() {
        var imgData = cxta.getImageData(0,0,canvasa.width,canvasb.height);
        var pixelData = imgData.data;
        for(var i = 0;i<canvasa.width*canvasa.height;i++){
            var r = pixelData[4*i];
            var g = pixelData[4*i+1];
            var b = pixelData[4*i+2];
            pixelData[4*i] = 255 - r;
            pixelData[4*i+1] = 255 - g;
            pixelData[4*i+2] = 255 - b;
        }
        cxtb.putImageData(imgData,0,0,0,0,canvasa.width,canvasa.height);
    }
    function gray() {
        var imgData = cxta.getImageData(0,0,canvasa.width,canvasb.height);
        var pixelData = imgData.data;
        for(var i = 0;i<canvasa.width*canvasa.height;i++){
            var r = pixelData[4*i];
            var g = pixelData[4*i+1];
            var b = pixelData[4*i+2];
            var gray = r*0.3 + g*0.59 + b *0.2;
            pixelData[4*i] = gray;
            pixelData[4*i+1] = gray;
            pixelData[4*i+2] = gray;
        }
        cxtb.putImageData(imgData,0,0,0,0,canvasa.width,canvasa.height);
    }
    function black() {
        var imgData = cxta.getImageData(0,0,canvasa.width,canvasb.height);
        var pixelData = imgData.data;
        for(var i = 0;i<canvasa.width*canvasa.height;i++){
            var r = pixelData[4*i];
            var g = pixelData[4*i+1];
            var b = pixelData[4*i+2];
            var gray = r*0.3 + g*0.59 + b *0.2;
            if(gray>255/2){
                gray = 255;
            }else{
                gray = 0;
            }
            pixelData[4*i] = gray;
            pixelData[4*i+1] = gray;
            pixelData[4*i+2] = gray;
        }
        cxtb.putImageData(imgData,0,0,0,0,canvasa.width,canvasa.height);
    }
</script>
</html>